<template>
  <div class="box">
    <div class="box-Header">
      <img src="../assets/imgs/goods-sort/bjbd.png" alt="" />
    </div>
    <div class="sort-list">
      <ul>
        <li v-for="(v, i) in arr" :key="i">
          <div class="logo2"><img :src="v.goodsImg" alt="" /></div>
          <div class="mz">
            {{ v.goodsName }}
            <div class="logoIcon"><span class="iconfont icon-icon"></span></div>
          </div>
          <p>{{ v.goodsPrice }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "sort",
  data: function () {
    return {
      arr: [],
    };
  },
  created() {
    axios({
      url: "/api/xiaomipro/goods/goods1",
      method: "get", //可以不写 默认get
    }).then((res) => {
      let arr = [];
        console.log(res.data.goods[0].second[0].third);
      let a = res.data.goods[0].second[0].third;
      //   this.arr = res.data.goods[0].second[0].third;
      for (let i = 0; i < a.length; i++) {
        // console.log(a[i].goodsName)
        if (a[i].goodsName.indexOf("新人专享") == -1) {
        } else {
          arr.push(res.data.goods[0].second[0].third[i]);
        }
      }
      this.arr = arr;
    });
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #021937;
}
.box-Header {
  width: 100%;
  /* height: 0.585rem; */
  /* height: 30%; */
  /* background-color: pink; */
}
.box-Header img {
  width: 100%;
}
/*  */
.sort-list {
  margin: 0 0.07rem;
  display: flex;
  justify-content: center;
}
.sort-list ul {
  width: 99%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* align-content: space-between; */
}
.sort-list ul li {
  /* width: 1.13rem; */
  width: 31.8%;
  height: 1.51rem;
  background: linear-gradient(to bottom, #fff7ed, 20%, #f2dfbe 50%);
  list-style: none;
  border-radius: 0.06rem;
  margin-bottom: 0.06rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 商品展示 */
.sort-list ul li .logo2 {
  width: 1.12rem;
  height: 1rem;
}
.sort-list ul li .logo2 img {
  width: 100%;
  height: 100%;
}
.sort-list ul li .mz {
  padding: 0 0.05rem;
  height: 0.2rem;
  line-height: 0.2rem;
  border-radius: 0.25rem;
  background: linear-gradient(to left, #f74602, 20%, #db2403 30%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.1rem;
  color: #fff;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.sort-list ul li .mz .logoIcon {
  width: 0.15rem;
  height: 0.15rem;
  background-color: #fff;
  margin: 0.02rem 0 0 4px;
  border-radius: 50%;
  line-height: 0.15rem;
  color: red;
  opacity: 0.9;
  font-weight: bold;
  margin-bottom: 0.01rem;
  box-sizing: border-box;
}
.sort-list ul li .mz .logoIcon span {
  font-size: 0.1rem;
  margin-left: 0.02rem;
}
.sort-list ul li p {
  width: 1rem;
  line-height: 0.18rem;
  text-align: center;
  font-size: 0.1rem;
  color: #89847c;
  padding-top: 0.05rem;
  box-sizing: border-box;
}

/* .sort-list ul li .mz{
		width: 55px;
		height: 18px;
		background-color:red;
		display: flex;
		align-items: center;
		justify-content:center;
		margin: 0 auto;
		border-radius: 25px;
		font-size: 10px;
		color: #fff;
		opacity: .9;
		padding: 0 0 2px 2px;
		box-sizing: border-box;
	}
	.sort-list ul li .mz .logoIcon{
		transform: scale(.7);
		font-weight: bold;
		margin: 3px 0 0 3px;
		border-radius: 50%;
		background-color: #fff;
		color: #D82305;
	}
	.sort-list ul li p{
		font-size: 10px;
		width: 100px;
		line-height: 20px;
		display:block;
		margin: 2px auto;
		color:#89847C;
		text-align: center;
	} */
</style>
